<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>商品详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/goods_detail.css"/>
    <style type="text/css">
    	.mui-bar a:nth-child(3){
    		width: 0.7%;
    		background: rgba(229,62,48,0.6);
    	}
    	.mui-bar a:nth-child(3)>span,
		.mui-bar a:nth-child(4)>span{
			width: 100% !important;
			font-size: 1em;
			height: auto !important;
		}
		/*拼团*/
		.group_list .mui-btn{
			background: #e53e30;
			color: #fff;
		}
		.p_num{
			color: #e53e30;
		}
    </style>
</head>
<body>
	
    
    <div class="mui-content">
		<!-- swiper 图片轮播  轮播图宽高一致-->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_1.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_2.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_3.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_4.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/goods_5.jpg">
					</a>
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>
		
		<!--内容-->
		<section class="goods">
			<!--商品-->
			<div class="price"><span>￥36.00</span><span>销量：9999</span></div>
			<p>原价：<s>￥46.00</s></p>
			<div class="mui-ellipsis-2">【沃洋优品】 印尼进口天然椰子水</div>
			<hr />
			
			<ul class="mui-table-view group_list">
			        <li class="mui-table-view-cell mui-row">
			            <div class="mui-col-xs-5">12345678910</div>
			            <div class="mui-col-xs-5">
			            	<div>还差<span class="p_num">1</span>人拼成</div>
			            	<p>剩余:<span class="countdown" data-date='2019-1-26 16:30:00'>00:00:00</span></p>
			            </div>
			            <div class="mui-col-xs-2"><button type="button" class="mui-btn">拼团</button></div>
			        </li>
			        <li class="mui-table-view-cell mui-row">
			            <div class="mui-col-xs-5">12345678910</div>
			            <div class="mui-col-xs-5">
			            	<div>还差<span class="p_num">1</span>人拼成</div>
			            	<p>剩余:<span class="countdown" data-date='2019-1-26 20:55:55'>00:00:00</span></p>
			            </div>
			            <div class="mui-col-xs-2"><button type="button" class="mui-btn">拼团</button></div>
			        </li>
			        <li class="mui-table-view-cell mui-row">
			            <div class="mui-col-xs-5">12345678910</div>
			            <div class="mui-col-xs-5">
			            	<div>还差<span class="p_num">1</span>人拼成</div>
			            	<p>剩余:<span class="countdown" data-date='2019-1-26 24:00:00'>00:00:00</span></p>
			            </div>
			            <div class="mui-col-xs-2"><button type="button" class="mui-btn">拼团</button></div>
			        </li>
			    </ul>
			
			
			<div class="goods_des">
				<div>商品描述</div>
				<p>这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，这里是商品描述，</p>
			</div>
		</section>
		<div>
			<img src="img/goods_img.jpg" alt="" />+
		</div>
		
		
		<!--评论列表-->
		<div class="comment">
			<div>评论区</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<div>12345678910 <span>2019-1-25 23:00</span></div>
					<p>
						这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，
					</p>
					<div class="comment_start">
						<img src="img/stars5.gif" />
					</div>
				</li>
				<li class="mui-table-view-cell">
					<div>12345678910 <span>2019-1-25 23:00</span></div>
					<p>
						这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，这是评论，
					</p>
					<div class="comment_start">
						<img src="img/stars5.gif" />
					</div>
				</li>
			</ul>
		</div>
		<hr />
		<!--评论-->
		<form class="mui-input-group" id="comment_form">
		
			<!--星星-->
			<div id="star" class="steyy0">
				<div class="ste" data-id='1'></div>
				<div class="ste" data-id='2'></div>
				<div class="ste" data-id='3'></div>
				<div class="ste" data-id='4'></div>
				<div class="ste" data-id='5'></div>
			</div>
			<input type="hidden" id="starr" name="starr" value>
		
			<div class="textarea">
		
				<textarea name="des" rows="3"></textarea>
				<button type="submit" class="mui-btn mui-btn-blue">提交评论</button>
			</div>
		
		</form>
    </div>
    

    
    
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item" href="javascript:history.go(-1)">
            <span class="mui-icon mui-icon-back"></span>
        </a>
        <a href="merchant.html" class="mui-tab-item">
            <span class="mui-icon"><img src="img/shop_fill.png"/></span>
        </a>
        <a href="shopping_cart.html" class="mui-tab-item">
            <span class="mui-icon">￥48.00</span>
            <span class="mui-tab-label">单独购买</span>
        </a>
        <a href="shopping_cart.html" class="mui-tab-item">
            <span class="mui-icon">￥36.00</span>
            <span class="mui-tab-label">发起拼单</span>
        </a>
    </nav>
    <!--返回顶部-->
    <div id="backTop"><img src="img/top.png"/></div>
    
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	var swiper = new Swiper('.swiper-container', {
			spaceBetween: 10,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
			autoplay: {
				delay: 2500,
				disableOnInteraction: false,
			},
		});
		swiper.init()
		
		//星级
		$('.ste').click(function(){
			let id = $(this).data('id')
			$('#starr').val(id)
			$('#star').attr('class',`steyy${id}`)
		})
		
		$(document).scroll(()=>{
			let top = $(document).scrollTop()
			if(top>200){
				$('#backTop').fadeIn()
			}else{
				$('#backTop').fadeOut()
			}
		})
		
		$('#backTop').click(e=>{
			mui.scrollTo(0,500);
		})
		
		/*********		倒计时	**********/
		function set_time(){
			$('.countdown').each(function(){
				let time = $(this).data('date') 		//获取下单时间
				let new_date = new Date(time)
				new_date.setDate(new_date.getDate()+1)
				let countDown = new Date(new_date-new Date())
				let h = countDown.getHours()
				let m = countDown.getMinutes()
				let s = countDown.getSeconds()
				h = h<10 ? '0'+h : h
				m = m<10 ? '0'+m : m
				s = s<10 ? '0'+s : s
				$(this).html(`${h}:${m}:${s}`)
			})
		}
		setInterval(set_time,500)
    </script>
</body>
</html>
